<template lang="pug">
.detail
  .detail-container
    .detail-header
      el-button(icon="el-icon-arrow-left" size="small" name="back" @click="$router.back()") 返回
      .detail-header-title 找材详情
    .detail-status
      .detail-status-value
        label 当前订单状态：
        span(v-if="detail.orderList.status == 2") 待发货
        span(v-if="detail.orderList.status == 3") 已发货
        span(v-if="detail.orderList.status == 4") 已完成
        span(v-if="detail.orderList.status == 5") 已关闭
      .detail-status-handles
        el-button(v-if="detail.orderList.status == 2" size="small" type="primary" @click="postDelivery") 去发货
        //- el-button(size="small" name="black") 打印订单
    .detail-info
      .detail-info-section
        .detail-info-title 基本信息
        .info-item
          .info-item-label 订单ID：
          .info-item-value {{$route.params.id}}
        .info-item
          .info-item-label 订单号：
          .info-item-value {{detail.orderInfo.orderNo}}
        .info-item
          .info-item-label 下单时间：
          .info-item-value {{detail.orderInfo.orderTime}}
      .detail-info-section
        .detail-info-title 物流信息
        .detail-info-row
          .detail-info-row-title 买家信息
          .info-item
            .info-item-label 收货人：
            .info-item-value {{detail.orderLogistic.receiverName}}
          .info-item
            .info-item-label 联系方式：
            .info-item-value {{detail.orderLogistic.mobile}}
          .info-item
            .info-item-label 联系地址：
            .info-item-value {{detail.orderLogistic.address}}
        .detail-info-row
          .detail-info-row-title 供货商实发物流信息
          .info-item
            .info-item-label 物流公司名称：
            .info-item-value {{detail.orderLogistic.shippingCompany}}
          .info-item
            .info-item-label 物流单号：
            .info-item-value {{detail.orderLogistic.trackNumber}}
          .info-item.info-item-start
            .info-item-label 物流单号照片：
            .info-item-value.info-item-photo
              .pic-item(:style="{ 'background-image': `url(${detail.orderLogistic.trackPhoto})` }")
    .detail-info-section
      .detail-info-title 商品信息
      el-table(
        :header-cell-style="{ 'background-color': '#F3F3F3', 'color': '#363636' }"
        border,
        :data="detail.orderList.detail"
        :span-method="objectSpanMethod"
      )
        el-table-column(min-width="350" label="商品")
          template(slot-scope="scope")
            .table-item-flex
              .table-item-img(:style="{ 'background-image': `url(${scope.row.img})` }")
              .table-item-name {{scope.row.materialName}}
        el-table-column(min-width="140" label="规格属性")
          template(slot-scope="scope")
            .table-item-spec
              .spec-item(v-for="item in scope.row.spec") {{item.specName}}：{{item.specValue}}
        el-table-column(min-width="140" label="数量" prop="num")
        el-table-column(min-width="140" label="备注" prop="remark")
          template(slot-scope="scope")
            .table-item-spec
              .spec-item {{detail.orderList.remark}}
    .detail-info-section
      .detail-info-title 操作者
      el-table(
        :header-cell-style="{ 'background-color': '#F3F3F3', 'color': '#363636' }"
        border,
        :data="detail.orderLogs"
      )
        el-table-column(label="操作者" prop="operateName")
        el-table-column(label="操作时间" prop="operateTime")
        el-table-column(label="订单状态" prop="orderStatus")
  delivery-modal(:show="showDialog", :orderId="$route.params.id" @close="closeDialog" @success="confirmDialog")
</template>

<script>
import { getOrderDetail } from 'api'
import deliveryModal from '@/components/modal/deliveryModal'
export default {
  name: 'orderDetail',
  components: {
    deliveryModal
  },
  data () {
    return {
      detail: {
        orderInfo: {},
        orderList: {
          detail: []
        },
        orderLogistic: {},
        orderLogs: []
      },
      showDialog: false
    }
  },
  methods: {
    postDelivery () {
      this.showDialog = true
    },
    closeDialog () {
      this.showDialog = false
    },
    confirmDialog () {
      this.showDialog = false
      this.getDetail()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
      if (columnIndex === 3) {
        if (rowIndex % 100 === 0) {
          return {
            rowspan: 100,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getOrderDetail, { content: { orderId: this.$route.params.id } })
        this.detail = ResultSet.userData
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getDetail()
    })
  }
} 
</script>

<style lang="scss" scoped>
.detail {
  padding: 0 32px 16px;
}
.detail-container {
  width: 100%;
  padding: 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.detail-header {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #CBCBCB;
}
.detail-header-title {
  margin-left: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
}
.detail-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 24px;
  background: #FFF0F1;
}
.detail-status-value {
  font-size: 14px;
  label {
    color: #A79E9E;
  }
  span {
    color: #FF2E42;
    font-weight: bold;
  }
}
.detail-info {
  margin-top: 23px;
}
.detail-info-section {
  margin-bottom: 39px;
}
.detail-info-title {
  font-size: 14px;
  font-weight: bold;
  color: #363636;
  margin-bottom: 23px;
}
.detail-info-row-title {
  margin-bottom: 19px;
  font-size: 14px;
  color: #363636;
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  &.info-item-start {
    align-items: flex-start;
  }
  .info-item-label {
    font-size: 14px;
    color: #A7A7A7;
  }
  .info-item-value {
    font-size: 14px;
    color: #363636;
  }
}
.info-item-photo {
  display: flex;
}
.pic-item {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.table-item-flex {
  display: flex;
  align-items: center;
  .table-item-img {
    width: 120px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .table-item-name {
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #363636;
  }
}
</style>
